<template>
	<view class="x-aside-select" :style="{height,width,'background-color':bgColor,...customStyle}"  >
		<scroll-view class="x-aside-select-menu"  >
			<view v-for="(menu,index) in list" 
				@click="setScrollTop(index)"
				:class="idx == index? 'bg':'bg1'" 
				class="x-aside-select-menu-item"
				:key="'menu'+index">
				{{menu.menuTitle}}
			</view>
		</scroll-view>
		
		<scroll-view  :scroll-top="scrollTop"  @scroll="handleScroll" class="x-aside-select-goods":style="{height}"   :scroll-with-animation="true" :scroll-y="true" id="x-scroll-view-001">
			
			<view v-for="(menu,index) in list[idx].goods" :key="'x-goods-id-'+index" :id="'x-goods-id-'+index" @click="dump(menu.id)">
				<view style="padding: 20rpx;">{{menu.goodsTitle}}</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	
	//做节流用的
	var prev = Date.now();

	
	import xFoodView from '../x-food-view/x-food-view.vue';
	export default {
		components: {
			'x-food-view':xFoodView,
		},
		props: {
			"height": {
				type: String,
				default: "500rpx"
			},
			"width": {
				type: String,
				default: "100%"
			},
			"bgColor": {
				type: String,
				default: "#fff"
			},
			"customStyle": {
				type: Object,
				default: () => {}
			},
			"list": {
				type: Array,
				default: () => []
			}

		},
		data() {
			return {
				idx:0,
				
				topWatcher:0,
				
				// 设置滑动的距离
				scrollTop:0,
				
				//!滑动容器距离顶部高度
				scrollViewTop: 0,
				
				//!锚点;
				scrollIntoView:''
			};
		},
		mounted() {
			this.getScrollViewTop();
			this.setListChildrenTopAttr();
			this.getindexbanner()
		},
		methods: {
			dump(e){
				console.log(e)
				uni.navigateTo({
					url:'../../pages/info/fb?typeid='+e
				})
			},
				getindexbanner(){
					this.$.ajax(2, 'post', 'getinfocate', {
						// uid: uni.getStorageSync('uid'),
						// page:this.page
					}, (res) => {
						// console.log(res)
						if (res.code == 1) {
							this.list = res.list
						
						}
					})
				},
			/*获取滑动容器的距离顶部高度;*/
			async getScrollViewTop() {
				const {top} = await this.queryElement("x-scroll-view-001");
				this.scrollViewTop = top;
			},
			

			/* 格式化list,使得每个list-item 具有top属性;*/
			async setListChildrenTopAttr() {
				var i = 0;
				for (; i < this.list.length; i++) {
					const data = await this.queryElement('x-goods-id-' + i);
					const next = await this.queryElement('x-goods-id-' + (i + 1));
					this.$set(this.list[i], 'top', data.top - this.scrollViewTop);
					// this.$set(this.list[i], 'id', 'x-goods-id-' + i);
					if(next) {
						this.$set(this.list[i], 'bottom', next.top - this.scrollViewTop- 1);
						continue;
					}
					this.$set(this.list[i], 'bottom',false);
				}
			},
			
	
			/* 获取元素*/
			queryElement(id) {
				const query = uni.createSelectorQuery().in(this);
				return new Promise((resolve, reject) => {
					try {
						query.select('#' + id).boundingClientRect(data => {
							resolve(data);
						}).exec();
					} catch (e) {
						reject(e)
					}
				})
			},
			
			
			/* 商品<scroll-view> 滑动事件*/
			handleScroll({target}) {
				var now = Date.now();
				if(now - prev >= 300) {
					this.topWatcher = target.scrollTop;
					prev = now;
				}
			},
			
			
			
			
			/* 设置高亮*/
			setHeighlight({bottom,top}) {
				/*边缘事件*/
				if(!bottom)
					return this.topWatcher >= top;
				/* 正常事件 */
				return this.topWatcher >= top && this.topWatcher < bottom;
			},
			
			
			
			setScrollTop(index) {
				this.idx = index
				console.log(index)
				// this.scrollTop = object.top - 1;
				// this.$nextTick(()=>this.scrollTop = object.top);
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	// @import '../../uni.scss';
	.bg{
		background-color: #fff;
	}
	.x-aside-select-goods{
		
	}
	.x-aside-select {
		display: grid;
		
		grid-template-columns: 200rpx auto;
		grid-gap: 33rpx;
		// min-height: 100vh;

		&-menu {
			color: #696E83;
			background-color: #F7F8FB;

			&-item {
				width: 100%;
				padding: 30rpx 47rpx 30rpx 23rpx;
				box-sizing: border-box;
			}
		}

		&-menu-hl {
			color: #3A3A3A;
			background-color: #fff;
		}



		&-goods {
			background-color: #fff;
			&-classify {
				color: #333642;
				line-height: 70rpx;
			}
			&-item {
				height: 150rpx;
				box-sizing:border-box;
				background-color: #18B566;
			}
		}
	}
</style>
